<template>
  <div>
    <el-row>
      <el-col :span="3">
        <font>科室名称：</font>
      </el-col>
      <el-col :span="15">
        <el-input type="text"
                  placeholder="请输入"
                  v-model="department.name"></el-input>
      </el-col>
    </el-row><br>

    <font>医院名称：</font>&nbsp;&nbsp;&nbsp;&nbsp;
    <el-dropdown @command="HospitalMethod">
      <el-button type="primy">
        {{ hospital }}<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item,i) in hospitals"
                          :key="i"
                          :command="item">{{item.name}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <br><br>

    <font>上级分类：</font>&nbsp;&nbsp;&nbsp;&nbsp;
    <el-dropdown @command="classificationMethod">
      <el-button type="primy">
        {{ classification }}<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item,i) in departments"
                          :key="i"
                          :command="item">{{item.name}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <font style="color:red">不选择分类默认为一级分类</font>
    <br><br>

    <span>审核状态：</span>&nbsp;&nbsp;&nbsp;&nbsp;
    <el-radio-group v-model="department.status">
      <el-radio :label="1">是</el-radio>
      <el-radio :label="0">否</el-radio>
    </el-radio-group><br><br>

    <span>备注：</span>
    <el-input type="textarea"
              v-model="department.comment"
              rows="10"></el-input><br><br>
    <div>
      <el-button type="danger"
                 size="mini"
                 @click="change()">确定</el-button>
      <el-button type="success"
                 size="mini"
                 @click="close()">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  created: function () {
    this.$axios({
      method: "get",
      url: "/hospitalDepartment/findHospital",
    }).then((res) => {
      this.hospitals = res.data.data;
    });
  },
  data () {
    return {
      department: {
        name: '',
        hospitalname: '',
        fatherid: '',
        status: '',
        comment: ''
      },
      classification: "请选择科室",
      hospital: "请选择医院",
      departments: [],
      hospitals: []
    }
  },
  methods: {
    change: function () {
      //不选择分类默认为顶级分类
      if (this.classification === "请选择科室") {
        this.department.fatherid = 0
      }
      this.$emit('change', this.department);
    },
    close: function () {
      //触发自定义事件
      this.classification = "请选择科室";
      this.$emit('close');
    },
    //下拉菜单所有分类
    HospitalMethod (activeHospital) {
      this.hospital = activeHospital.name;
      this.department.hospitalname = activeHospital.name;
      this.$axios({
        method: "get",
        url: "/hospitalDepartment/findDepartmentByHospitalName",
        params: {
          hospitalname: activeHospital.name
        }
      }).then((res) => {
        this.departments = res.data.data;
      });
    },
    classificationMethod (activeDepartment) {
      this.classification = activeDepartment.name;
      this.department.fatherid = activeDepartment.id;
    },

  }
}
</script>

<style scoped>
</style>